﻿<%@ Page Language="C#" AutoEventWireup="true" Inherits="FL.Web.BackEnd.BasePage" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>数据编辑</title>
    <link href="/Styles/form.common.css" rel="stylesheet" />

    <style>
        @charset "UTF-8";

        body {
            font-family: '微软雅黑',Arial,sans-serif;
            font-size: 13px;
            font-style: normal;
            font-weight: normal;
            line-height: 21px;
        }

        table {
            border: solid 1px #D5D5D5;
            border-collapse: collapse;
        }

            table td {
                border: 1px solid #D5D5D5;
                font-size: 12px;
                padding: 2px 2px;
            }

            table thead td {
                background-color: #eee;
            }

            table th {
                background-color: #EEE;
                border-right: 1px solid #D5D5D5;
                font-size: 13.5px;
                line-height: 100%;
                font-weight: bold;
                padding: 2px 2px;
                text-align: left;
            }

        .fixed {
            position: fixed;
            z-index: 99;
        }

        .datagrid table thead tr {
            background-color: #fff;
            margin: 0px;
            height: 25px;
            padding-top: 2px;
            padding-bottom: 2px;
            /*border-top: 1px solid #B4C9C6;*/
        }
    </style>
    <style>
        .items .state {
            border: solid 1px #808080;
            background-color: #eee;
            padding: 2px;
            margin: 2px;
            text-align: center;
            float: left;
        }

        .datagrid table thead tr {
            border: 1px solid #808080;
            background-color: #eee;
        }

        .datagrid table thead {
            background-color: #fff;
            width: 99.99%;
            margin: 0px;
            /*position: fixed;*/
            height: 25px;
            padding-top: 2px;
            padding-bottom: 2px;
            border-top: 1px solid #B4C9C6;
        }

        #entitys {
            position: absolute;
            margin-top: 25px;
            margin-left: 5px;
            background-color: white;
            width: 220px;
            height: 300px;
            /*border: 1px solid black;*/
            overflow: scroll;
        }

        .botton2 {
            width: 60px;
            float: right;
        }

        /*.tabEntity { 
           // bordger: 1px solid black;
        }*/

        /*.data {
            width:220px;
            height:100px;

            border: 1px solid pink;
        }*/
    </style>
</head>
<script src="/sframework/boot.js"></script>
<body>
    <div class="toolbar2" style="height: 25px; float: left; width: 100%">
        &nbsp;&nbsp;<a href="javascript:showEntity()" class="button">选择表/视图</a>
        &nbsp;&nbsp;<a href="javascript:aClear()" class="button">清空</a>
        &nbsp;&nbsp;<a href="#" class="button">保存</a>
    </div>
    <div style="width: 100%; padding-left: 5px;">
        <div id="field_items" style="height: 250px; float: left; width: 20%; background-color: #ffffff; border: solid 1px #808080">
            <div style="border-bottom: solid 1px #808080; text-align: center">字段项</div>
            <div class="items">
                <div class="state" id="test1" field="test1" datatype="">测试1</div>
                <span class="state" id="test2" field="test2" datatype="">测试2</span>
                <span class="state" id="test3" field="test3" datatype="">测试3</span>
                <span class="state" id="test4" field="test4" datatype="">测试4</span>
                <span class="state" id="test5" field="test5">测试5</span>
                <span class="state" id="test6" field="test6">测试6</span>
                <span class="state" id="test7" field="test7">测试7</span>
                <span class="state" id="test8" field="test8">测试8</span>
                <span class="state" id="test9" field="test9">测试9</span>
            </div>
        </div>
        <div style="width: 79.5%; height: 250px; float: left;">
            <div class="items" id="group_field_items" style="height: 250px; width: 19.5%; background-color: #ffffff; border: solid 1px #808080; float: left;" title="分组" fn="">
                <div style="border-bottom: solid 1px #808080; text-align: center">分组</div>
                <ul></ul>
            </div>
            <div class="items" id="sum_field_items" style="height: 250px; width: 19.5%; background-color: #ffffff; border: solid 1px #808080; float: left;" title="求合" fn="sum">
                <div style="border-bottom: solid 1px #808080; text-align: center">求合</div>
                <ul></ul>
            </div>
            <div class="items" id="avg_field_items" style="height: 250px; width: 19.5%; background-color: #ffffff; border: solid 1px #808080; float: left;" title="平均" fn="avg">
                <div style="border-bottom: solid 1px #808080; text-align: center">平均</div>
                <ul></ul>
            </div>
            <div class="items" id="max_field_items" style="height: 250px; width: 19.5%; background-color: #ffffff; border: solid 1px #808080; float: left;" title="最大值" fn="max">
                <div style="border-bottom: solid 1px #808080; text-align: center">最大值</div>
                <ul></ul>
            </div>
            <div class="items" id="min_field_items" style="height: 250px; width: 19.5%; background-color: #ffffff; border: solid 1px #808080; float: left;" title="最小值" fn="min">
                <div style="border-bottom: solid 1px #808080; text-align: center">最小值</div>
                <ul></ul>
            </div>
        </div>
    </div>
    <div id="sql" editable="true" style="width: 100%; float: left; padding: 5px;"></div>
    <div id="result" class="datagrid" editable="true" style="width: 50%; float: left; padding: 5px; height: 400px; overflow: auto;"></div>
    <div id="main" style="height: 500px; float: right; margin-right: 30px; border: 1px solid #808080; width: 45%;"></div>
    <div id="entitys">
        <div id="entity">
        </div>
        <div class="botton2">
            <%--<input type="button" value="确定" style="width: 50px" onclick="aSubmit()" />&nbsp;&nbsp;--%>
            <input type="button" value="关闭" style="width: 50px" onclick="aClose()" />
        </div>
    </div>
</body>

<script src="/Scripts/common/jquery.data.js"></script>
<script src="/Scripts/common/jquery.action.js"></script>
<script src="/Scripts/common/jquery.tabs.js"></script>
<script src="/scripts/app/edit.common.js"></script>
<script src="/SFramework/jquery.json-2.2.js"></script>
<script src="/SFramework/jquery-ui-1.9.2.custom.min.js"></script>
<script src="../../build/js/esl.js"></script>
<script>

    //初始化拖动效果
    var _table = '';
    function initDrag() {
        $("#field_items .state").each(function () {
            $(this).draggable({ helper: "clone" })
        });

        $(".items").droppable({
            accept: ".state", drop: function (c, i) {
                var _c = c;
                var _i = i;
                var o = _i.draggable[0];
                var source = $("#" + o.id);
                $(this).find("ul").append("<li field='" + source.attr("field") + "'>" + source.text() + "</li>");
                var sql = bulidSql(_table);
                $("#sql").html(sql);
                getResult();

            }
        });
    }
    //清空页面
    function aClear() {
        $("#group_field_items").find("ul>li").remove();
        $("#sum_field_items").find("ul>li").remove();
        $("#avg_field_items").find("ul>li").remove();
        $("#max_field_items").find("ul>li").remove();
        $("#min_field_items").find("ul>li").remove();
        //location.reload();
    }

    //生成 SQL
    function bulidSql(table) {
        var group = getItems("group");
        var sum = getItems("sum");
        var max = getItems("max");
        var min = getItems("min");
        var avg = getItems("avg");

        var _group = getItemsStr("group");
        var _sum = getItemsStr("sum");
        var _max = getItemsStr("max");
        var _min = getItemsStr("min");
        var _avg = getItemsStr("avg");

        var strSql = "";
        strSql = _group;
        strSql = strSql == "" ? "" + _sum : strSql + (_sum == "" ? _sum : "," + _sum);
        strSql = strSql == "" ? "" + _max : strSql + (_max == "" ? _max : "," + _max);
        strSql = strSql == "" ? "" + _min : strSql + (_min == "" ? _min : "," + _min);
        strSql = strSql == "" ? "" + _avg : strSql + (_avg == "" ? _avg : "," + _avg);
        return "select " + strSql + " from " + (table && table != '' && table != null ? table : getPar("table")) + (_group == "" ? "" : " group by " + _group);
    }


    //获取项目
    function getItems(type) {
        var _items = [];
        var items = $("#" + type + "_field_items").find("li");
        var text = $("#" + type + "_field_items").attr("title");
        var fn = $("#" + type + "_field_items").attr("fn");
        $.each(items, function (i, e) {
            var $e = $(e);
            item = { fn: fn + "(" + $e.attr("field") + ")", real_filed: $e.attr("field"), field: type + "_" + $e.attr("field"), text: text + ":" + $e.text() };
            _items.push(item);
        });
        return _items;
    }


    function getItemsStr(type) {
        var _items = "";
        var items = $("#" + type + "_field_items").find("li");
        var text = $("#" + type + "_field_items").attr("title");
        var fn = $("#" + type + "_field_items").attr("fn");
        $.each(items, function (i, e) {
            var $e = $(e);
            item = { fn: fn + "(" + $e.attr("field") + ")", real_filed: $e.attr("field"), field: type + "_" + $e.attr("field"), text: text + ":" + $e.text() };
            if (_items == "") {
                _items = type == "group" ? $e.attr("field") : fn + "(" + $e.attr("field") + ")" + " as " + type + "_" + $e.attr("field");
            }
            else {
                _items = _items + "," + (type == "group" ? $e.attr("field") : fn + "(" + $e.attr("field") + ")" + " as " + type + "_" + $e.attr("field"));
            }
        });
        return _items.replace(/group_/g, "");
    }

    //获取字段信息
    function getFieldItems(table) {
        // var table = getPar("table");
        var fields_items = fnGetSingleData("t_set_datagrid", "entity='" + table + "'");
        $("#field_items .items").html("");
        var itemHTML = "";
        $.each(fields_items, function (i, item) {
            itemHTML = ' <div class="state" id="' + item.name + '" field="' + item.name + '" datatype="' + item.data_type + '">' + item.caption + '</div>';
            $("#field_items .items").append(itemHTML);
        }
        );
        $("#entitys").hide();
    }

    //获取结果
    function getResult() {
        var url = "/extendpage/data/jsondata.aspx?action=sql&r=" + Math.random();
        getAjax(url, { sql: $("#sql").html() }, function (data) {
            var o = $.evalJSON(data);//数据对象
            getHeaderItem(o);
            setChartData(o);
        });
        myChart.setOption(option);
        //initDrag();
    }

    function setChartData(o) {
        var group = getItems("group");
        var sum = getItems("sum");
        if (!sum || sum.length == 0) {
            return;
        }
        try {
            option.xAxis[0].data = [];
            for (var i = 0; i < o.length; i++) {
                //if (i > 5) {
                //    continue;
                //}
                option.xAxis[0].data.push(o[i][group[0].real_filed]);

                //alert(o[i].entity);
            }
            //初始化option.series[0]中的data                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
            option.series[0].data = [];
            for (var j = 0; j < o.length; j++) {
                //if (j > 5) {

                //    continue;
                //}
                var width = o[j][sum[0].field] ? o[j][sum[0].field] : 50;
                option.series[0].data.push(width);
                //alert(o[j].width);
            }
        }
        catch (error) { };
    }

    //获取表头信息
    function getHeaderItem(o) {
        var group = getItems("group");
        var sum = getItems("sum");
        var max = getItems("max");
        var min = getItems("min");
        var avg = getItems("avg");
        var arrObject = group.concat(sum).concat(max).concat(min).concat(avg);
        var strHTML = "<table id='table_list'>";
        strHTML = strHTML + createTableHeader(arrObject);// + createTableHeader(arrObject).replace("<thead>","<thead class='fixed'>");
        var template = createTableRowContent(arrObject);
        $.each(o, function (i, e) {
            strHTML = strHTML + createTemplate(template, e);
        });
        strHTML = strHTML + "</table>";
        $("#result").html("");
        $("#result").html(strHTML);
        // $("#table_list").FixedHead();
    }


    //生成表
    function createTemplate(htmlTemplate, obj) {
        $.each(obj, function (property, value) {
            if (property != "") {
                htmlTemplate = htmlTemplate.replace("{" + property + "}", value);
            }
        });
        return htmlTemplate;
    }


    /*
    生成表头
    */
    function createTableHeader(arrObject) {
        var strHTML = "<thead><tr>";
        $.each(arrObject, function (i, item) {
            strHTML = strHTML + "<td style='width:150px;'><div  style='overflow:hidden;width:100%'>" + item.text + "</div></td>";
        });
        strHTML = strHTML + "</tr></thead>";
        return strHTML;
    }


    //生成表数据
    function createTableRowContent(arrObject) {
        var strHTML = "<tr>";
        $.each(arrObject, function (i, item) {
            strHTML = strHTML + "<td style='width:150px;'><div  style='overflow:hidden;width:100%'>{" + item.field.replace("group_", "") + "}</div></td>";
        });
        strHTML = strHTML + "</tr>";
        return strHTML;
    }


    /*
    // 获得表字段信息
    // table:对应的表名
    */
    function getTableFields(table) {
        var fields_items = fnGetSingleData("t_set_datagrid", "entity='" + table + "'");
        return field_items;
    }
    function aClose() {
        $("#entitys").hide();
    }

    //选择表和视图
    function showEntity() {
        $("#entitys").show();
        var fields_items = fnGetSingleData("t_set_entity");
        $.each(fields_items, function (i, item) {
            itemHTML = '<table id="tabEntity" border="1"><tr><td>' + item.name + '</tr></td></table>';
            $("#entity").append(itemHTML);
        }
        );
        //给td添加事件，获得选中的数据
        $("td").bind("click", function () {
            var tdEntity = $(this).html();
            _table = tdEntity;
            getFieldItems(tdEntity);
            initDrag();
            //getResult(_table);
            aClose();
        });
    }
    /*初始拖动对象*/
    $(document).ready(function () {
        $("#entitys").hide();
        getFieldItems();

        initDrag();
    });

    var myChart = null;
    var option = null;
    // 路径配置
    require.config({
        paths: {
            'echarts': '../../build/echarts',
            'echarts/chart/bar': '../../build/echarts'
        }
    });
    // 作为入口
    require(
        [
            'echarts',
            'echarts/chart/line'
        ],
        function (ec) {
             // 基于准备好的dom，初始化echarts图表
             myChart = ec.init(document.getElementById('main'));
             option = {
                 title: {
                     text: ''
                 },
                 tooltip: {
                     trigger: 'axis'
                 },
                 legend: {
                     data: ['']
                 },
                 //toolbox: {
                 //    show: true,
                 //    feature: {
                 //        mark: { show: true },
                 //        dataView: { show: true, readOnly: false },
                 //        magicType: { show: true, type: ['line', 'bar'] },
                 //        restore: { show: true },
                 //        saveAsImage: { show: true }
                 //    }
                 //},
                 calculable: true,
                 xAxis: [
                     {
                         type: 'category',
                         boundaryGap: false,
                         data: []
                     }
                 ],
                 yAxis: [
                     {
                         type: 'value',
                         axisLabel: {
                             formatter: '{value}个'
                         },
                         splitArea: { show: true }
                     }
                 ],
                 series: [
                     {
                         name: '',
                         type: 'line',
                         itemStyle: {
                             normal: {
                                 lineStyle: {
                                     shadowColor: 'rgba(0,0,0,0.4)',
                                     shadowBlur: 5,
                                     shadowOffsetX: 3,
                                     shadowOffsetY: 3
                                 }
                             }
                         },
                         data: [],
                         markPoint: {
                             data: [
                                 { type: 'max', name: '最大值' },
                                 { type: 'min', name: '最小值' }
                             ]
                         },
                         markLine: {
                             data: [
                                 { type: 'average', name: '平均值' }
                             ]
                         }
                     }
                 ]
             };
             // 为echarts对象加载数据
             // myChart.setOption(option);
         }

    );

</script>
<script>
</script>
</html>
